<template>
  <div>
    <el-dialog
      :title="title"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="visible"
      top="10vh"
      width="1000px"
      @close="closeDialog"
    >
      <div class="main">
        <div class="name">
          店铺名称：<span>{{ detailObj.shopName }}</span>
        </div>
        <div class="numadd">
          <div class="num">
            吧台编号：<span>{{ detailObj.barCounterId }}</span>
          </div>
          <div>投放区域：<span>{{ detailObj.barCounterRegion }}</span></div>
        </div>
        <div class="numadd">
          <div class="num">
            分账方式：<span>{{ detailObj.allocationMode == 1 ? '商品佣金' : detailObj.allocationMode == 2 ? '订单分账' : '无' }}</span>
          </div>
          <div>分账收益：<span>{{ detailObj.allocationMode == 1 ? detailObj.yuan : detailObj.allocationMode == 2 ? detailObj.ratio : '无' }}</span></div>
        </div>
      </div>
      <div class="onte">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px" @change="handleRadio">
          <el-radio-button label="1">关联设备</el-radio-button>
          <el-radio-button label="2">关联人员</el-radio-button>
          <el-radio-button label="3">库存表</el-radio-button>
          <el-radio-button label="4">采购供货商</el-radio-button>
          <el-radio-button label="5">店铺采购单</el-radio-button>
        </el-radio-group>
      </div>
      <div class="onchel" v-if="tabPosition == '1'">
        <Devices :pageLoading="pageLoading" :tableData="tableObj.list" />
      </div>
      <div class="onchel" v-if="tabPosition == '2'">
        <Personnel :pageLoading="pageLoading" :tableData="tableObj.list" />
      </div>
      <div class="onchel" v-if="tabPosition == '3'">
        <Inventory :pageLoading="pageLoading" :tableData="tableObj.list" />
      </div>
      <div class="onchel" v-if="tabPosition == '4'">
        <Suppliers :pageLoading="pageLoading" :tableData="tableObj.list" />
      </div>
      <div class="onchel" v-if="tabPosition == '5'">
        <Purchase :pageLoading="pageLoading" :data="detailObj" :tableData="tableObj.list" :barCounterId="this.detailObj.barCounterId" />
      </div>
       <!-- 分页条 -->
      <pagination
        v-show="tableObj.total > 0"
        :total="tableObj.total"
        :page.sync="pageQuery.pageNum"
        :limit.sync="pageQuery.pageSize"
        @pagination="tabPosition == 1 ? '' : tabPosition == 2 ? getBarStaffId() : tabPosition == 3 ? getListByShopId() : tabPosition == 3 ?  getShopSupplierId() : getPurchaseId()"
      />
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/shop/index";
import Pagination from "@/components/Pagination";
export default {
  components: {
    Personnel: () => import("@/views/barcounter/shop/components/Personnel.vue"),
    Devices: () => import("@/views/barcounter/shop/components/Devices.vue"),
    Inventory: () => import("@/views/barcounter/shop/components/Inventory.vue"),
    Suppliers: () => import("@/views/barcounter/shop/components/Suppliers.vue"),
    Purchase: () => import("@/views/barcounter/shop/components/Purchase.vue"),
    Pagination
  },
  data() {
    return {
      visible: false,
      title: "详情",
      detailObj: {},
      tabPosition: "1",
      pageLoading: false,
      pageQuery: {
        pageNum: 1,
        pageSize: 10
      },
      tableObj: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0, // 一共多少页
      }
    };
  },
  methods: {
    init(data) {
      this.visible = true;
      this.detailObj = data
    },
    handleRadio(e) {
      this.tabPosition = e
      this.tableObj = { list: [], total: 0, pages: 0, }
      this.pageQuery = { pageNum: 1, pageSize: 10 }
      if (this.tabPosition == 1) {

      } else if (this.tabPosition == 2) {
        this.getBarStaffId()
      } else if (this.tabPosition == 3) {
        this.getListByShopId()
      } else if (this.tabPosition == 4) {
        this.getShopSupplierId()
      } else if (this.tabPosition == 5) {
        this.getPurchaseId()
      }
    },
    getBarStaffId() {
      api.barStaffId({ barId: this.detailObj.barCounterNumber, ...this.pageQuery }).then((result) => {
        this.pageLoading = true
        this.tableObj = result
        this.pageLoading = false
      })
    },
    getListByShopId() {
      api.listByShopId({ barCounterShopId: this.detailObj.barCounterShopId, ...this.pageQuery }).then((result) => {
        this.pageLoading = true
        this.tableObj = result
        this.pageLoading = false
      })
    },
    getShopSupplierId() {
      api.shopSupplierId({ barCounterShopId: this.detailObj.barCounterShopId, ...this.pageQuery }).then((result) => {
        this.pageLoading = true
        this.tableObj = result
        this.pageLoading = false
      })
    },
    getPurchaseId() {
      api.pageByDate({ barCounterId: this.detailObj.barCounterId, ...this.pageQuery }).then((result) => {
        this.pageLoading = true
        this.tableObj = result
        this.pageLoading = false
      })
    },
    closeDialog() {
      this.visible = false;
      this.tabPosition = "1";
      this.tableObj = { list: [], total: 0, pages: 0, }
      this.pageQuery = { pageNum: 1, pageSize: 10 }
      this.pageLoading = false
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  span {
    font-weight: 700;
  }
  .name {
    margin-bottom: 30px;
  }
  .numadd {
    display: flex;
    margin-bottom: 50px;
    .num {
      margin-right: 200px;
    }
  }
  .onte {
    padding: 20px 0 0 20px;
  }
  .onchel {
    width: 90%;
    margin-left: 2%;
  }
}
</style>
